<template>
  <KView class="goods-evaluate-item">
    <KView class="goods-evaluate-avatar">
      <sys-avatar :url="evaluate.headimgurl" shape="square"></sys-avatar>
    </KView>
    <KView class="goods-evaluate-content">
      <KView class="goods-evaluate-row clearfix">
        <KView class="goods-evaluate-username ellipsis">{{evaluate.nickname}}</KView>
        <KView class="goods-evaluate-time">{{$moment(evaluate.time).format('YYYY-MM-DD')}}</KView>
      </KView>
      <KView class="goods-evaluate-star">
        <sys-star-text :star="evaluate.star"></sys-star-text>
      </KView>
      <KView class="goods-evaluate-desc">
        <sys-textarea disabled v-model="evaluate.text"></sys-textarea>
      </KView>
      <KView v-if="evaluate.picList.length>0" class="goods-evaluate-image clearfix">
        <KView v-for="(pic,index) in evaluate.picList" :key="`pic_${index}`">
          <sys-image :src="pic" mode="auto" :radius="8"></sys-image>
        </KView>
      </KView>
    </KView>
  </KView>
</template>

<script>
  import SysStarText from 'common/sysStarText';
  import SysAvatar from 'common/sysAvatar';
  import SysImage from 'common/sysImage';
  import SysTextarea from 'common/sysTextarea';

  export default {
    props: {
      evaluate: {
        type: Object,
        required: true
      }
    },

    data() {
      return {};
    },

    components: {
      SysStarText,
      SysAvatar,
      SysImage,
      SysTextarea
    }
  };

</script>

<style lang="scss">
  .goods-evaluate-item {
    display: flex;

    .goods-evaluate-avatar {
      width: formatPx(74);
      height: formatPx(78);
      margin-right: formatPx(20);
    }

    .goods-evaluate-content {
      flex: 1;

      >div {
        margin-bottom: formatPx(20);

        &:last-child {
          margin-bottom: 0;
        }
      }

      .goods-evaluate-row {
        height: formatPx(40);
        line-height: formatPx(40);
      }

      .goods-evaluate-star {
        height: formatPx(20);
      }

      .goods-evaluate-desc {
        color: #565961;
        font-size: formatPx(26);
        .sys-textarea{
          line-height: formatPx(30);
        }
      }

      .goods-evaluate-username {
        float: left;
        color: #565961;
        font-size: formatPx(30);
        width: calc(100% - #{formatPx(155)});
      }

      .goods-evaluate-time {
        float: right;
        color: #b6b8bc;
        font-size: formatPx(26);
      }

      .goods-evaluate-image {
        height: formatPx(140);

        >div {
          float: left;
          width: formatPx(186);
          height: 100%;
          margin-right: formatPx(16);

          &:last-child {
            margin-right: 0;
          }
        }
      }
    }
  }

</style>
